<template>
	<view class="from_box">
		<u-form :model="form" ref="uForm">
			<u-form-item label-width="150rpx" label="家长姓名" class="rules_item">
				<view class="rules_tip">*</view><u-input v-if="babyData===null" v-model="form.class"
					class="rules_item" @click="showSex = true" placeholder="请输入家长姓名" />
				<u-input v-model="babyData.name2" disabled v-else />
			</u-form-item>
			<u-form-item label-width="150rpx" label="联系方式" class="rules_item">
				<view class="rules_tip">*</view><u-input v-if="babyData===null" v-model="form.class"
					class="rules_item" @click="showSex = true" placeholder="请输入联系方式" />
				<u-input v-model="babyData.name2" disabled v-else />
			</u-form-item>
			<u-form-item label-width="150rpx" label="家庭住址" class="rules_item">
				<view class="rules_tip">*</view><u-input v-if="babyData===null" v-model="form.class"
					class="rules_item" @click="showSex = true" placeholder="请输入家庭住址" />
				<u-input v-model="babyData.name2" disabled v-else />
			</u-form-item>
			<u-form-item label-width="150rpx" label="具体住址" class="rules_item">
				<view class="rules_tip">*</view><u-input v-if="babyData===null" v-model="form.class"
					class="rules_item" @click="showSex = true" placeholder="请输入具体住址" />
				<u-input v-model="babyData.name2" disabled v-else />
			</u-form-item>
			
			<u-form-item label-width="150rpx" label="宝宝名称" prop="title" class="rules_item">
				<view class="rules_tip">*</view>
				<u-input v-model="form.title" placeholder="请输入宝宝名称"
					 />
			</u-form-item>
			<u-form-item label-width="150rpx" :label-position="labelPosition" label="出生年月" prop="time"
				class="rules_item">
				<view class="rules_tip">*</view><u-input :border="border" placeholder="请选择出生年月"
					v-model="form.birthdate" type="select" :select-open="pickerTime1"
					@click="pickerTime1 = true"></u-input>
			</u-form-item>
			<u-form-item label-width="150rpx" label="宝宝月龄" prop="title" class="rules_item">
				<view class="rules_tip">*</view>
				<u-input v-model="form.title" placeholder="无需填写,选择出生年月后,自动计算"
					 />
			</u-form-item>
			<u-form-item label-width="150rpx" label="宝宝性别" prop="title" class="rules_item">
				<view class="rules_tip">*</view>
				<u-input v-model="form.title" placeholder="请选择宝宝性别" disabled
					 />
			</u-form-item>
			<u-form-item label-width="180rpx" :label-position="labelPosition" label="预约到访时间" prop="time"
				class="rules_item">
				<view class="rules_tip"style="left:-17rpx">*</view><u-input :border="border" placeholder="请选择到访时间"
					v-model="form.birthdate" type="select" :select-open="pickerTime1"
					@click="pickerTime1 = true"></u-input>
			</u-form-item>
			<u-form-item label-width="150rpx" label="备注" class="rules_item">
				<view class="rules_tip" style="top:32rpx">*</view><u-input v-model="form.remark" placeholder="请输入备注"
					type="textarea" />
			</u-form-item>
		</u-form>
		<view class="btn_box">
			<u-button type="warning" shape="circle" class="from_sub" @click="handleSubmit">提 交</u-button>
		</view>
		<u-picker mode="time" v-model="pickerTime1" @confirm="(e)=>timeConfirm(e,'start')" :params="params"></u-picker>
		<u-action-sheet :tips="tips" :list="selectlist" v-model="showSex" @click="actionSheetCallback"></u-action-sheet>
		<!-- 提示 -->
		<u-toast ref="uToast" />
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: 'http://www.example.com/upload',
				fileList: [{
					url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
				}], // 初始值
				babyData: {},
				pickerTime1: false, //控制日期显示
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false,
					timestamp: false,
				},
				tips: {

					text: '请选择性别',

					color: '#909399',

					fontSize: 24

				},
				showSex: false,
				selectlist: [{
						text: '男'
					},
					{
						text: '女'
					}
				],
				form: {
					title: '',
					address: '',
					class: '',
					birthdate: '',
					remark: ''
				},

				checkboxList: [{
						name: '全选',
						checked: false,
						disabled: false
					},
					{
						name: '超级一班',
						checked: true,
						disabled: false
					},
					{
						name: '超级二班',
						checked: false,
						disabled: false
					},
					{
						name: '超级三班',
						checked: false,
						disabled: false
					},
					{
						name: '超级四班',
						checked: false,
						disabled: false
					},
					{
						name: '超级五班',
						checked: false,
						disabled: false
					},
					{
						name: '超级六班',
						checked: false,
						disabled: false
					},
					{
						name: '超级四班',
						checked: false,
						disabled: false
					},
					{
						name: '超级五班',
						checked: false,
						disabled: false
					},
					{
						name: '超级超级六班',
						checked: false,
						disabled: false
					},
					{
						name: '超级超级四班',
						checked: false,
						disabled: false
					},
					{
						name: '五班',
						checked: false,
						disabled: false
					},
					{
						name: '六班',
						checked: false,
						disabled: false
					}
				],
			}
		},
		onShow() {
			this.babyData = this.$Route.query.data
			console.log(this.babyData, 'this.babyData');
		},
		methods: {
			handleSelectBaby() {
				if (!this.form.class) {
					this.$refs.uTips.show({
						title: '请先选择所在班级！',
						type: 'warning',
						duration: '2000'
					})
					return false;
				}
				this.showSex = true
			},
			handleSubmit() {
				let files = [];
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				// 如果您不需要进行太多的处理，直接如下即可
				// files = this.$refs.uUpload.lists;
				console.log(files,this.$refs.uUpload.lists)
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-form-item--left__content__label{
		color: #999999;
	}
	::v-deep .u-input__textarea {
		border-radius: 10rpx;
		padding: 26rpx !important;
		background: #F4F5F7;
	}
	.from_box {
		padding: 20rpx 40rpx;
		background-color: #fff;
		    margin: 30rpx;
		    border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.btn_box{
		position: fixed;
		    bottom: 0px;
		    display: flex;
		    justify-content: space-evenly;
		    width: 100%;
		    background: #fff;
		    left: 0;
		    align-items: center;
		    padding-bottom: 38rpx;
	}
	::v-deep .u-input__textarea {
		border-radius: 10rpx;
		padding: 26rpx !important;
		background: #F4F5F7;
	}

	.from_sub {
		margin-top: 30rpx;
		width: 90%;
	}

	::v-deep .u-form-item--right__content__slot {
		position: relative !important;
	}

	.rules_item {
		position: relative;

		.rules_check {
			top: 43% !important;
		}

		.rules_tip {
			position: absolute;
			color: red;
			left: -34rpx;
			top: 0rpx;
		}
	}
</style>